<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/plan.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
    <script src="{{ layui.setter.base }}js/common.js"></script>
</script>

<style>
    .nextTable {
        width: 100%;
    }
    table thead tr th,
    table tbody tr .t {
        /* height: 30px; */
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }
    table {
        table-layout: fixed;
        /*table的内部布局固定大小，才可以通过td的width控制宽度*/
        word-wrap: break-word;
        /*允许长单词换到下一行*/
    }
</style>
<div class="layui-containner">
    <div class="layui-fluid">
        <div class="layui-title">工单详细信息</div>
        <ul class="box layui-row" style="overflow:visible;">
            <li class="layui-col-md4 layui-col-sm4">
                <div>工单名称：<span></span></div>
                <div>工单状态：创建</div>
                <div>巡检计划名称：
                    <input type="text" id="Names_plan" autocomplete="off" style="cursor:pointer;">
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div>巡检开始时间：<input type="text" id="startTime" autocomplete="off"></div>
                <div>巡检截至时间：<input type="text" id="endTime" autocomplete="off"></div>
                <!-- <div class="consume">巡检耗时：<span></span></div> -->
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div>巡检人：<span></span></div>
                <div>位置范围：<span></span></div>
                <div>巡检说明：<span></span></div>
            </li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <span class="layui-title-inner">设备基本信息</span>
        </div>
        <table class="layui-table" lay-size="sm" id="table-device">
            <thead>
                <tr>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>供应商</th>
                    <th>设备系列</th>
                    <th>设备型号</th>
                    <th style="width: 50%;">巡检项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <footer class="footer layui-btn-containner">
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary submit layui-bg-red">提交</button>
            <button type="button" class="footer-btn layui-btn layui-btn-radius layui-btn-primary layui-bg-blue submit-btn">
                保存
              </button>
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary cancel">取消</button>
        </footer>
    </div>
</div>


<script type="text/html" id="addDeviceTpl">
    <div class="leon-style-alert">
      <div class="layui-alert-box">
        <div class="layui-alert-title">
          <span class="layui-title-inner">巡检计划名称选择</span>
          <span class="layui-title-screen">
            <div class="screen-btn">
              <form class="layui-form" action="">
                <input type="search" name="value" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
              </form>
            </div>
          </span>
        </div>
        <div class="layui-content">
          <table class="layui-table" id="table-device-alert"></table>
        </div>
        <div class="footer layui-btn-containner">
          <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="queryTableDevice" >添加</button>
          <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
        </div>
      </div>
    </div>
</script>
<script>
    layui.use(["form", "api", "utill", "view", "upload", "laydate", "laytpl", "view", "admin", "layer", "element", "table", "treeSelect",'layer'], function () {
        var api = layui.api;
        var form = layui.form;
        var view = layui.view;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var view = layui.view;
        var admin = layui.admin;
        var layer = layui.layer;
        var $ = layui.$;
        var layer = layui.layer;
        var table = layui.table;
        var setter = layui.setter;
        var element = layui.element;
        var treeSelect = layui.treeSelect;
        var utill = layui.utill;

        $('[data-jump="patrol/cash"]').addClass('layui-this').attr('color', '#FFF');
        form.render();
        // 巡检开始时间
        
        var startTime = laydate.render({
                elem: '#startTime'
                ,type: 'datetime' //时间格式：yyyy/MM/dd HH:mm:ss
                ,done: function(value, date, endDate) {
                    endTime.config.min='1900-1-1';
                        startTime.config.max=endTime.config.max;
                    endTime.config.min = {
                        year: date.year,
                        month: date.month - 1,//重点！！！
                        date: date.date,
                        hours:date.hours, 
                        minutes:date.minutes, 
                        seconds:date.seconds
                    }
                    var stime = new Date(Date.parse(value.replace("-", "/")));            
                    var etime = new Date(Date.parse($("#endTime").val().replace("-", "/")));   
                    if(stime>etime){ 
                        $("#endTime").val(value);
                    }
                }
            });
            var endTime = laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
                ,min: $("#startTime").val(),
                done: function(value, date, endDate) {
                    endTime.config.min='1900-1-1';
                        startTime.config.max=endTime.config.max;
                }
        });
        var alertEvent = {
        addDevice: function (layero, index) {
          table.render(
            $.extend({}, utill.tableOpts(), {
              elem: "#table-device-alert",
              id: "#table-device-alert",
              height: 300,
              toolbar: "",
              url: api.host + api.pushPlan_llp,
              type: 'post',
              where: {
                    type: 'I'
                },
                cols: [[
                    { type: 'radio', event: 'radio' }
                    , { type: 'numbers', title: '序号', align: 'center', }
                    , { field: 'tcPlanName', title: '计划名称', align: 'center', }
                    , { field: 'tcPlanCode', title: '计划编号', align: 'center', }
                ]],
            })
          );
          form.on("submit(queryTableDeviceHeader)", function (data) {
            var allData = data.field;
            table.reload("#table-device-alert", {
              where: allData
            });
            return false;
          });
          utill.keyup('.searchInput', '.search-blank-icon');
          form.on("submit(queryTableDevice)", function (data) {
            var res = table.checkStatus("#table-device-alert").data;
            let id = res[0].tcPlanId;
            let name = res[0].tcPlanName;
            $("#Names_plan").val(name);
            $("#Names_plan").attr('data-id',id);
            comment(layui.api.host + '/plan/selectPlan1.json', 'post', id, function (res) {
                                let planDetails = res.data.planDetails // 表格数据
                                let planid = res.data.planid // 头部信息 
                                let data = JSON.stringify(res.data);
                                let table = `<tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <table class="nextTable">
                                            <thead>
                                                <tr>
                                                    <td>项目名称</td>
                                                    <td>项目说明</td>
                                                    <td>单位</td>
                                                    <td>最高标准值</td>
                                                    <td>最低标准值</td>
                                                    <td>是否完成</td>
                                                    <td>巡检结果</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>`;
                                $('#Names_plan').data('data',data);
                                $('.box li:eq(0)').find('div:eq(0) span').html(planid.tcPlanName).parents('li').next().next().children('div').eq(0).html(`<div>巡检人：<span>${planid.gen02}</span></div>`)
                                    .next().html(`<div>位置范围：<span>${planid.tcPlanArea}</span></div>`).next().html(`<div>巡检说明：<span>${planid.tcPlanDsc}</span></div>`)

                                planDetails.forEach(item => {
                                    let nextTable = ''
                                    item.isProject.forEach(elem => {
                                        nextTable += `<table class="nextTable">
                                            <tbody>
                                                <tr>
                                                    <td class="t">${elem.tcInspName || ''}</td>
                                                    <td class="t">${elem.tcInspDsc || ''}</td>
                                                    <td class="t">${elem.tcInspUnit || ''}</td>
                                                    <td class="t">${elem.tcInspMax || ''}</td>
                                                    <td class="t">${elem.tcInspMin || ''}</td>
                                                    <td class="t"></td>
                                                    <td class="t"></td> 
                                                </tr>
                                            </tbody>
                                        </table>`
                                    })
                                    table += `<tr>
                                    <td class="t">${item.fia01 || ''}</td>
                                    <td class="t">${item.fia02 || ''}</td>
                                    <td class="t">${item.fic02 || ''}</td>
                                    <td class="t">${item.pmc03 || ''}</td>
                                    <td class="t">${item.tcSeriesName || ''}</td>
                                    <td class="t">${item.fii02 || ''}</td>
                                    <td class="t">
                                        ${nextTable}
                                    </td>
                                </tr>`

                                })
                                $('#table-device tbody').html(table)
                            }, true);
                        layer.close(layer.index);
                        return false;
                    });
                $('.btn2').click(function(){
                    layer.close(layer.index);
                });
                $('.submit-btn').on('click',function(){
                    let project = [];
                    let res = JSON.parse($('#Names_plan').data('data'));
                    project.push({
                        tcProjDsc: res.planDetails[0].isProject[0].tcInspDsc,
                        tcProjId: res.planDetails[0].isProject[0].tcProjId,
                        tcProjStatus: res.planid.tcPlanStatus
                    });
                    let data = {
                        "tcReqPlan":$('#Names_plan').data('id'),
                        "fil12": $('#startTime').val(),
                        "fil13": $('#endTime').val(),
                        "fil05": 0
                    };
                    admin.req({
                        type: 'post',
                        url: layui.api.host + '/order/insertPollingOrder.json',
                        dataType: 'json',
                        contentType: "application/json",
                        data:JSON.stringify(data),
                        success: function (res) {
                            if(res.code == 0){
                                layer.open({
                                    content: res.message
                                });
                                setTimeout(function(){
                                    location.hash = '/patrol/cash';
                                },1000)
                            }else{
                                layer.open({
                                    content: res.message
                                });
                            }
                        }
                    });
                })
                $('.submit').on('click', function () {
                    var times1 = $('#startTime').val();
                    var times2 = $('#endTime').val();
                    if (times1 != "" && times2 != "") {
                        let _this = this
                        let params = {
                            "fil12": $('#startTime').val(),
                            "fil13": $('#endTime').val(),
                            "tcReqPlan":$('#Names_plan').data('id'),
                            "fil05": 2
                        }
                        comment(layui.api.host + '/order/insertPollingOrder.json', 'post', params, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.message);
                                $('.cancel').click();
                                //再一次渲染表格
                                table.render('inspectionSheet');
                            } else {
                                layer.msg('新增失败')
                            }
                        }, true)
                    } else {
                        layer.msg("请将时间填写完整");
                    }

                });
                
            }
        }    
        utill.keyup('.search-blank-inner','.search-blank-icon'); 
            $("#Names_plan").click(function(){
                layer.open({
                type: 1,
                title: false,
                area: ["662px", "536px"],
                fixed: true,
                shadeClose: true,
                closeBtn: 0,
                content: $("#addDeviceTpl").html(),
                success: alertEvent.addDevice
                });
            });

        // 保存按钮
        $('.cancel').attr('lay-href', 'patrol/cash');
    })
</script>